<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>电能质量历史数据</title>
	<script src="../../plugins/vue/vue.min.js"></script>
	<script src="../../plugins/jquery-3.3.1.min.js"></script>	
	<script src="../../plugins/echarts.common.min.js"></script>
	<script src="../../plugins/axios/dist/axios.min.js"></script>	
	<!-- 时间控件layDate -->
	<script src="../../plugins/layer-v2.3/layer/laydate/laydate.js"></script>
	<link rel="stylesheet" href="../../plugins/layer-v2.3/layer/laydate/skins/default/laydate.css">
	<!-- 重复样式 -->
	<link rel="stylesheet" href="css/reset.css">
	<!-- 自定义样式 -->
	<link type="text/css" rel="stylesheet" href="css/index.css">
	<!-- 自定义表格样式 -->
	<link rel="stylesheet" href="../../css/my-table-data.css">
	<!-- 自定义多选框样式 -->
	<link rel="stylesheet" href="../../css/my-chosen.css">
	<!-- 字体图标 -->
	<link rel="stylesheet" href="../../plugins/font-awesome-4.7.0/css/font-awesome.css">
	<!-- chosen插件 -->
	<script src="../../plugins/chosen/js/chosen.jquery.js"></script>
	<link rel="stylesheet" href="../../plugins/chosen/css/chosen.css">
	<!-- 多选框组件 -->
	<script src="../../js/components/my-select.js"></script>
	<script src="../../js/components/my-select2.js"></script>
	<!-- 图表组件 -->
	<script src="components/bar-echarts.js"></script>
	<!-- dataTables插件 -->
	<script src="../../plugins/dataTables/jquery.dataTables.js"></script>
	<link rel="stylesheet" href="../../plugins/dataTables/css/jquery.dataTables.css">
	<!-- 表格组件 -->
	<script src="../../js/components/table-data.js"></script>
	<!-- 日期组件 -->
	<script src="../../js/components/my-date.js"></script>
	<!-- ajax组件 -->
	<script src="../../js/my-axios.js"></script>
</head>
<body>
	<div id="app">
		<div id="select">
			<div class="select_top">				
			  	<div class="select_item">
				  	<div class="form-group" >
			            <label class="font-noraml">区域</label>
			            <my-select 
			            v-if="region.length > 0" 
			            :data-select="region"
			            :select-id="byRtuModelSel" 
			            :port="importantUser"
			            @linkage="change"/>
			        </div>
			    </div>
			    <div class="select_item">
				  	<div class="form-group">
			            <label class="font-noraml">重要用户</label>
			            <my-select2 
			             :data-select2="A" 
			             :select-id="byRtuModelSel_2"
			             @linkage="changeA"/>
			        </div>
			    </div>
			    <div class="select_item">
				  	<div class="form-group">
			            <label class="font-noraml">参数</label>
			            <my-select2 
			             :data-select2="B"  
			             v-if="B.length > 0" 
			             :select-id="byRtuModelSel_3"
			             @linkage="changeB"/>
			        </div>
			    </div>
			    <div class="select_item">
                        <span class="time_label">查询时间</span> 
                        <span class="time_input">
							<my-date :date-id="usedStartTime" @gettime="mytime"/>
						</span>
						<i>至</i>
						<span class="time_input">
							<my-date :date-id="usedEndTime" @gettime="myendtime"/>
						</span>
                </div>
                <div class="select_btn">
                	<a href="javascript:;" id="query_derive" class="select_query_btn" @click="getEchartsData">
                		<i class="fa fa-search" aria-hidden="true"></i>导出
                	</a>
                	<a href="javascript:;" id="query_btns" class="select_query_btn" @click="getTableData">
                		<i class="fa fa-file-word-o" aria-hidden="true"></i>查询
                	</a>
                </div>
			</div>
			<div class="show_tabs_row">
				<div class="show_tabs_span" ref="show_tabs_1" style="color:orange;" @click="table_show">表格展示</div>
				<div class="show_tabs_span" ref="show_tabs_2" @click="echerts_show">柱状图展示</div>
			</div>
		
			<div class="curveDiv" v-if="isTableShow" v-show="v1">
				<table-data 				 
				 :domain-name="domainName"
				 :table-url="tbaleUrl" 
				 :columns="opTableData" 
				 :select-data="selectData" 
				 :table-id="rtuAccTable"/>
	        </div>
	        <div class="curveDiv" v-show="v2" style="width:100%">
	   			<bar-echarts :op-data="opData"/>
          	</div> 
        </div>
	</div>
</body>
<script>

Vue.prototype.$echarts = echarts ;
Vue.prototype.$axiosGet = ajaxGet;
Vue.prototype.$ajaxPost = ajaxPost;
	var app = new Vue({
		el: "#app",
		data:{
			domainName:'http://192.168.21.106:8080/bspower/a/',
			tbaleUrl:'/listByPage',
			selected:'区', //多选框text
			selected1:'',	
			selected2:'次数', //多选框text
			selectData:{selected:'区',selected1:'桥',selected2:'电'},
			v1:true,
			v2:false,
			isTableShow:true,
			rtuAccTable:"rtuAccTable",
			opTableData:[{data: 'area', title: "区域"},{ data: 'user' , title: "用户"}],
			opData:{
				"x":["槐荫公安局","槐荫税务局","槐荫商店","槐荫工厂","槐荫小区"],
				"msg":[{
				    "name":"",
				    "type": "bar",
				    "data": [5, 20, 96, 10, 15]
				}]
			},
			region:[],
			byRtuModelSel:'byRtuModelSel',
			byRtuModelSel_2:'byRtuModelSel_2',
			byRtuModelSel_3:'byRtuModelSel_3',
			importantUser:'importantUser',
			//统计
			statistics:["电压突降次数","最大电流突降比例","电流突升次数","最大电流突升比例","电流三相不平衡持续时间","停电次数,停电频率"],
			val_1:'',
			A:[],
			B:[],
			usedStartTime:'usedStartTime',
			usedEndTime:'usedEndTime',
			startTime: '',
			endTime:''
		},
		beforeCreate(){			
			this.$axiosGet('/region',res=>{
				this.region = res;
				this.selected = res[0]
				// console.log(res)
			});
			this.$axiosGet('/param',res=>{
				this.B = res;
				this.selected2 = res[0]
			});
		},
		methods:{
			//获取表格数据
			getTableData(){
				this.v1 = true;
				this.v2 = false;
				this.$refs.show_tabs_1.style.color = "orange";
				this.$refs.show_tabs_2.style.color = "#bad9fb";
				let params = {
					selected:this.selected,
					selected1:this.selected1,
					selected2:this.selected2
				}
				this.selectData = params
				this.isTableShow = false;
				// console.log('isTableShow',this.isTableShow)
				this.$nextTick(() => (this.isTableShow = true))	
				console.log('selectData',this.selectData)
				console.log('dddd',$('#'+this.selectId).next('.chosen-container').find('.chosen-single').find('span').html());			
			},
			//获取柱状图数据
			getEchartsData(){
				this.v1 = false;
				this.v2  = true;
				this.$refs.show_tabs_1.style.color = "#bad9fb";
				this.$refs.show_tabs_2.style.color = "orange";
				let url = "./data/02.json";
				let _this = this;
				this.$http.post(url).then(function(resolve){
					_this.opData = resolve.data;
					console.log('res',_this.opData)

				}).catch(function(err){
					console.log(err);
				})
			},
			table_show(){  //tabs按钮
				if(this.v1 == 1){
					this.v2 = 0;
					
				}else{
					this.v1 = 1;
					this.v2 = 0;
					event.target.style.color = "orange";
					this.$refs.show_tabs_2.style.color = "#bad9fb";
				}
			},
			echerts_show(){
				if(this.v2 == 1){
					this.v1 = 0;
				}else{
					this.v2 = 1;
					this.v1 = 0;
					event.target.style.color = "orange";
					this.$refs.show_tabs_1.style.color = "#bad9fb";
				}
			},	   	 	
            change(value){
				// console.log('value-A',value)
				this.A = value.res;
				this.selected = value.selected;
			},
			changeA(val){
				this.selected1 = val;
			},
			changeB(val){
				this.selected2 = val;
			},
			//接收开始时间
			mytime(val){
				console.log('time',val)
				this.startTime = val
			},
			//接收结束时间
			myendtime(val){
				console.log('endTime',val)
				this.endTime = val
			}
		},
		components:{barEcharts,tableData,MySelect,MySelect2,MyDate}
	})
	
	
</script>
</html>